<template>
  <view>
    <view class="uni-uploader" v-if="show">
      <view class="uni-uploader-head">
        <view class="uni-uploader-title">点击可预览选好的图片</view>
        <view class="uni-uploader-info">{{ imageList.length }}/9</view>
      </view>
      <view class="uni-uploader-body">
        <view class="uni-uploader__files">
          <block v-for="(image, index) in imageList" :key="index">
            <view class="uni-uploader__file dade">
              <image
                class="uni-uploader__img"
                :src="image"
                :data-src="image"
                @tap="previewImage"
              ></image>

              <view
                class="tupian"
                style="background-color: rgb(0, 0, 0, 0.5)"
                @click.stop="deleteImage(index)"
              >
                <text class="iconfont icon-shanchu" style="color: #ffffff"></text>
              </view>
            </view>
          </block>
          <view class="uni-uploader__input-box">
            <view class="uni-uploader__input" @tap="chooseImage"></view>
          </view>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
import permision from '../common/permission.js'
var sourceType = [['camera'], ['album'], ['camera', 'album']]
var sizeType = [['compressed'], ['original'], ['compressed', 'original']]
export default {
  props: {
    draftImg: Array,
    show: {
      type: Boolean,
      default: true,
    },
  },

  data() {
    return {
      title: 'choose/previewImage',
      imageList: [],
      sourceTypeIndex: 2,
      sourceType: ['拍照', '相册', '拍照或相册'],
      sizeTypeIndex: 2,
      sizeType: ['压缩', '原图', '压缩或原图'],
      countIndex: 8,
      count: [1, 2, 3, 4, 5, 6, 7, 8, 9],
    }
  },
  mounted(options) {
    console.log(this.draftImg, '我看一下111111')
    this.imageList = this.draftImg
    console.log(this.imageList, '我看一下')
  },
  onUnload() {
    ;(this.imageList = []),
      (this.sourceTypeIndex = 2),
      (this.sourceType = ['拍照', '相册', '拍照或相册']),
      (this.sizeTypeIndex = 2),
      (this.sizeType = ['压缩', '原图', '压缩或原图']),
      (this.countIndex = 8)
  },
  methods: {
    chooseImage: async function () {
      // #ifdef APP-PLUS
      // TODO 选择相机或相册时 需要弹出actionsheet，目前无法获得是相机还是相册，在失败回调中处理
      if (this.sourceTypeIndex !== 2) {
        let status = await this.checkPermission()
        if (status !== 1) {
          return
        }
      }
      // #endif

      if (this.imageList.length === 9) {
        let isContinue = await this.isFullImg()
        console.log('是否继续?', isContinue)
        if (!isContinue) {
          return
        }
      }
      uni.chooseImage({
        sourceType: sourceType[this.sourceTypeIndex],
        sizeType: sizeType[this.sizeTypeIndex],
        count:
          this.imageList.length + this.count[this.countIndex] > 9
            ? 9 - this.imageList.length
            : this.count[this.countIndex],
        success: (res) => {
          // res.tempFilePaths.forEach((item) => {
          //   // 上传图片
          //   this.$H
          //     .upload('/image/uploadmore', {
          //       token: true,
          //       name: 'imglist[]',
          //       filePath: item,
          //     })
          //     .then((result) => {
          //       this.imageList.push(result.data.list[0])
          //       this.$emit('change', this.imageList)
          //     })
          // })

          // this.imageList = this.imageList.concat(res.tempFilePaths);
          // console.log("W KANN",this.imageList);
          // this.$emit("change", this.imageList)
          const tempFilePaths = res.tempFilePaths

          //循环遍历传入，达到一次性上传多张的效果
          for (let i = 0; i < tempFilePaths.length; i++) {
            uni.uploadFile({
              // 后端api接口
              url: '/api/Img1',

              // uni.chooseImage函数调用后获取的本地文件路劲
              filePath: tempFilePaths[i],

              name: 'avatarfile', //后端通过'file'获取上传的文件对象

              //这里是请求头需要携带的token数据
              // getStorageSync获取本地缓存的token
              header: {
                token: uni.getStorageSync('token'),
              },
              success: (uploadFileRes) => {
                if (this.imageList.code == 0) {
                  uni.showToast({
                    title: imgRes.msg,
                    icon: 'error',
                    duration: 2000,
                  })
                  return
                }
                console.log(uploadFileRes.data, '修改成功111111')
                this.imageList.push(uploadFileRes.data)
                console.log(this.imageList, '我看看')
                this.$emit('change', this.imageList)
              },
            })
          }
        },
        fail: (err) => {
          console.log('err: ', err)
          // #ifdef APP-PLUS
          if (err['code'] && err.code !== 0 && this.sourceTypeIndex === 2) {
            this.checkPermission(err.code)
          }
          // #endif
          // #ifdef MP
          if (err.errMsg.indexOf('cancel') !== '-1') {
            return
          }
          uni.getSetting({
            success: (res) => {
              let authStatus = false
              switch (this.sourceTypeIndex) {
                case 0:
                  authStatus = res.authSetting['scope.camera']
                  break
                case 1:
                  authStatus = res.authSetting['scope.album']
                  break
                case 2:
                  authStatus = res.authSetting['scope.album'] && res.authSetting['scope.camera']
                  break
                default:
                  break
              }
              if (!authStatus) {
                uni.showModal({
                  title: '授权失败',
                  content: 'Hello uni-app需要从您的相机或相册获取图片，请在设置界面打开相关权限',
                  success: (res) => {
                    if (res.confirm) {
                      uni.openSetting()
                    }
                  },
                })
              }
            },
          })
          // #endif
        },
      })
    },
    isFullImg: function () {
      return new Promise((res) => {
        uni.showModal({
          content: '已经有9张图片了,是否清空现有图片？',
          success: (e) => {
            if (e.confirm) {
              this.imageList = []
              res(true)
            } else {
              res(false)
            }
          },
          fail: () => {
            res(false)
          },
        })
      })
    },
    previewImage: function (e) {
      var current = e.target.dataset.src
      uni.previewImage({
        current: current,
        urls: this.imageList,
      })
    },
    async checkPermission(code) {
      let type = code ? code - 1 : this.sourceTypeIndex
      let status = permision.isIOS
        ? await permision.requestIOS(sourceType[type][0])
        : await permision.requestAndroid(
            type === 0 ? 'android.permission.CAMERA' : 'android.permission.READ_EXTERNAL_STORAGE',
          )

      if (status === null || status === 1) {
        status = 1
      } else {
        uni.showModal({
          content: '没有开启权限',
          confirmText: '设置',
          success: function (res) {
            if (res.confirm) {
              permision.gotoAppSetting()
            }
          },
        })
      }

      return status
    },
    //  删除图片
    deleteImage(index) {
      uni.showModal({
        confirmText: '删除',
        cancelText: '取消删除',
        title: '提示',
        content: '是否删除该图片',
        success: (res) => {
          if (res.confirm) {
            this.imageList.splice(index, 1)
            this.$emit('change', this.imageList)
          }
        },
      })
    },
  },
}
</script>

<style lang="scss">
@import url('../../static/assets/wxss/iconfont.css');
.cell-pd {
  padding: 22rpx 30rpx;
}

.list-pd {
  margin-top: 50rpx;
}
.dade {
  position: relative;
}
.tupian {
  position: absolute;

  right: 0;
  top: 0;
  padding-left: 10rpx;
  padding-right: 10rpx;
  border-radius: 8rpx;
}
</style>
